<template>
	<div id="lx-detail">
		<div v-if="config.isGroup === 1" class="group-box">
			<div v-for="(group, index) in config.groups" :key="index" class="groups">
				<el-row>
					<el-col :span="24" class="title">{{ group.title }}</el-col>
					<el-col :span="24 / group.col" v-for="field in group.fields" :key="field.val">
						<div class="field">
							<span class="label">{{ field.name }}</span>
							<span class="value">{{ formatVal(field.val) }}</span>
						</div></el-col
					>
				</el-row>
			</div>
		</div>

		<template v-else>
			<div v-for="field in config.groups[0].fields" :key="field.val + '0'" class="no-group">
				<span class="label">{{ field.name }}：</span>
				<span class="value">{{ formatVal(field.val) }}</span>
			</div>
		</template>
	</div>
</template>
<script setup lang="ts" name="lx-detail">
import { ref } from 'vue';

interface IConfigType {
	isGroup: number;
	groups: Record<string, any>[];
}
const props = defineProps<{
	config: IConfigType;
	row: Record<string, any>;
}>();
const formatVal = computed(() => {
	return (val: string) => {
		if (val[0] === '$' && val[1] !== '{' && val[val.length - 1] !== '}') {
			const newVal = val.substring(1);
			return props.row[newVal] ?? '该字段值为空';
		}
	};
});
</script>

<style scoped lang="scss">
.groups {
	border: 1px solid #ebeef5;
	text-align: left;
	margin-bottom: 20px;
}
.group-box {
	.title {
		height: 43px;
		font-size: 18px;
		background: #fafafa;
		color: #909399;
		font-weight: 400;
		border: 1px solid #ebeef5;
		padding: 10px;
	}
	.field {
		min-height: 37px;
		.label,
		.value {
			width: 50%;
			display: inline-block;
			font-size: 14px;
			color: #909399;
			padding: 10px;
		}
		.label {
			background-color: #fafafa;
		}
		.value {
			background: #fff;
		}
	}
}
.no-group {
	height: 30px;
	font-size: 16px;
	.label {
		color: #606266;
		font-weight: 600;
	}
}
</style>
